/**
 * Created by asus on 2016/11/23.
 */
import React, { Component,PropTypes} from 'react';
import {Link} from 'react-router';
import TabBar from '../../Component/CommonComponent/TabBar'
import Split from '../CommonComponent/Split'
import Top from '../CommonComponent/Top'
import Empty from '../CommonComponent/Empty'
import Time from '../CommonComponent/Time'
import StockDesc from '../../Component/StockManage/StockDesc';
import CheckBox from '../../Component/OrderManage/CheckBox';
import IsShowEmptyImg from '../CommonComponent/IsShowEmptyImg'
import {MyInfo,AgentProductList,VirtualReturnApply,WarehouseReturnApply} from '../../Action/auth'
//import ChangeNum from '../CommonComponent/ChangeNum';
import ChangeNum from '../../Component/OrderManage/ChangeNum';
import DelayModal from '../../Component/CommonComponent/DelayModal'
import {bodyScroll,GetQueryString} from '../../Action/rpc';
import $ from 'jquery'
import iScroll from "iscroll/build/iscroll-probe";

export default class ExchangeGoods extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            WsTog:false,
            StockTog:false,
            goodsList:[],
            index:1,
            returnTotal:0,
            exchangeTotal:0,
            nowAmount:0,
            useAmount:0,
            modalDelay:false,
            deliveryNo:''
        };
        this.isUseSelectAll = false;
        this.amount = 0;
        this.select = [];
        this.selectNum = [];
        this.selectDel = [];
        this.selectStock = [];
        this.click = true;
        this.page = 1;
        this.list=[];
        this.loadingStep = 0;
        this.shopPrice = {}
    }

    static contextTypes = {
        router:PropTypes.object
    }

    async componentWillMount() {
        let returnTotal = 0;
        let that = this;
        await this.getMyInfo();
        this.returnGoods = JSON.parse(GetQueryString('returnJson'));
        await this.getAgentProductList(0,1,'');
        this.myScroll.refresh();
        await this.returnGoods.map(function(item){
            console.log(parseInt(item.num))
            console.log(item.productId)
            returnTotal += parseInt(item.num) * parseFloat(item.price);
        })
        this.setState({returnTotal:returnTotal})
        this.setState({index:GetQueryString('index')?GetQueryString('index'):0})
    }
    componentDidMount() {
        document.querySelector('body').addEventListener('touchmove',bodyScroll, false);

        var pullDownEl = $('#pullDown');
        pullDownEl['class'] = pullDownEl.attr('class');
        pullDownEl.attr('class','').hide();

        var pullUpEl = $('#pullUp');
        pullUpEl['class'] = pullUpEl.attr('class');
        pullUpEl.attr('class','').hide();

        this.myScroll = new iScroll('#content', {
            preventDefault: false,
            probeType: 2,//probeType：1对性能没有影响。在滚动事件被触发时，滚动轴是不是忙着做它的东西。probeType：2总执行滚动，除了势头，反弹过程中的事件。这类似于原生的onscroll事件。probeType：3发出的滚动事件与到的像素精度。注意，滚动被迫requestAnimationFrame（即：useTransition：假）。
            scrollbars: true,//有滚动条
            mouseWheel: true,//允许滑轮滚动
            fadeScrollbars: true,//滚动时显示滚动条，默认影藏，并且是淡出淡入效果
            bounce:true,//边界反弹
            interactiveScrollbars:true,//滚动条可以拖动
            shrinkScrollbars:'scale',// 当滚动边界之外的滚动条是由少量的收缩。'clip' or 'scale'.
            click: true ,// 允许点击事件
            keyBindings:true,//允许使用按键控制
            momentum:true// 允许有惯性滑动
        });
        //滚动时
        this.myScroll.on('scroll', this.scroll );
        this.myScroll.on('touchmove', function(e){e.stopPropagation()});
        //滚动完毕
        this.myScroll.on('scrollEnd',this.scrollEnd );
    }

    scroll=()=>{
        var pullDownEl = $('#pullDown');
        var pullDownL = pullDownEl.find('.pullDownLabel');
        var pullUpEl = $('#pullUp');
        var pullUpL = pullUpEl.find('.pullUpLabel');

        if(this.loadingStep == 0 && !pullDownEl.attr('class').match('flip|loading') && !pullUpEl.attr('class').match('flip|loading')){
            if (this.myScroll.y > 5) {
                //下拉刷新效果
                pullDownEl.attr('class',pullUpEl['class'])
                pullDownEl.show();
                this.myScroll.refresh();
                pullDownEl.addClass('flip');
                pullDownL.html('下拉刷新...');
                this.loadingStep = 1;
            }else if (this.myScroll.y < (this.myScroll.maxScrollY - 5) && this.state.leaderWareList.length>0) {
                if(this.state.listPage!=this.page){
                    //上拉刷新效果
                    pullUpEl.attr('class',pullUpEl['class'])
                    pullUpEl.show();
                    this.myScroll.refresh();
                    pullUpEl.addClass('flip');
                    pullUpL.html('上拉加载...');
                    this.loadingStep = 1;
                }
            }
        }

    }
    scrollEnd=()=>{
        var pullDownEl = $('#pullDown');
        var pullDownL = pullDownEl.find('.pullDownLabel');
        var pullUpEl = $('#pullUp');
        var pullUpL = pullUpEl.find('.pullUpLabel');

        if(this.loadingStep == 1){
            if (pullUpEl.attr('class').match('flip|loading')) {
                pullUpEl.removeClass('flip').addClass('loading');
                pullUpL.html('Loading...');
                this.loadingStep = 2;
                this.pullUpAction();
            }else if(pullDownEl.attr('class').match('flip|loading')){
                pullDownEl.removeClass('flip').addClass('loading');
                pullDownL.html('Loading...');
                this.loadingStep = 2;
                this.pullDownAction();
            }
        }
    }

    pullDownAction() {//下拉事件
        var pullDownEl = $('#pullDown');
        var pullDownL = pullDownEl.find('.pullDownLabel');

        this.page=1;
        this.getAgentProductList(0,this.page,'')

        pullDownEl.removeClass('loading');
        pullDownL.html('下拉刷新...');
        pullDownEl['class'] = pullDownEl.attr('class');
        pullDownEl.attr('class','').hide();
        this.myScroll.refresh();
        this.loadingStep = 0;
    }
    pullUpAction() {//上拉事件
        var pullUpEl = $('#pullUp');
        var pullUpL = pullUpEl.find('.pullUpLabel');

        if(this.state.listPage>this.page){
            this.page++;
            this.getAgentProductList(0,this.page,'')
            //this.getLeaderWarehouseList(this.state.index,this.page)
        }
        pullUpEl.removeClass('loading');
        pullUpL.html('上拉显示更多...');
        pullUpEl['class'] = pullUpEl.attr('class');
        pullUpEl.attr('class','').hide();
        this.myScroll.refresh();
        this.loadingStep = 0;
    }

    componentWillUnmount() {
        document.querySelector('body').removeEventListener('touchmove',bodyScroll, false);
    }

    async getMyInfo(){
        await MyInfo()
            .then(res=>{
                this.setState({nowAmount:res.NOW_AMOUNT})
                this.setState({useAmount:res.USE_AMOUNT})
            })
    }

    //进货列表
    async getAgentProductList(status,page,name){
        let that = this;
        await AgentProductList(status,page,name)
            .then(res=>{
                const page = Math.ceil(res.total/res.pageSize);
                this.setState({listPage:page})
                res.resultList.map(function(item){
                    that.shopPrice[item.ID] = item.price;
                })
                if(page==1){
                    //筛选退货选中的商品
                    this.returnGoods.map(function(item){
                        res.resultList.map(function(el,index){
                            if(item.productId == el.ID){
                                res.resultList.splice(index,1)
                            }
                        })
                    })
                    this.list = res.resultList;
                    this.setState({goodsList:this.list})
                }else{
                    this.returnGoods.map(function(item){
                        res.resultList.map(function(el,index){
                            if(item.productId == el.ID){
                                res.resultList.splice(index,1)
                            }
                        })
                    })
                    this.list = this.list.concat(res.resultList);
                    this.setState({goodsList:this.list})
                }
                this.myScroll.refresh();
            })
            .catch(err=>{
                console.warn('err',err)
            })
    }

    submit(Id,ind){
        let exchangeTotal = 0;
        let that = this;
        let num = parseInt(this.refs['num'+ind].value);
        if(isNaN(num)){
            this.refs['num'+ind].value=num=0
        }
        if(num<0||num==''){
            this.refs['num'+ind].value=num=0
        }else{
            this.refs['num'+ind].value=num
        }

        if(this.selectStock.length==0 && num>0){
            this.selectStock.push({productId:Id,num:num});
        }else{
            for(var i=0;i<this.selectStock.length;i++){
                if(this.selectStock[i].productId==Id){
                    this.selectStock.splice(i,1)
                }
            }
            if(num>0){
                this.selectStock.push({productId:Id,num:num});
            }
        }
        this.selectStock.map(function(item){
            exchangeTotal += parseInt(item.num) * that.shopPrice[item.productId];
        })
        this.setState({exchangeTotal:exchangeTotal})
    }

    async toReturn(){
        if(this.state.exchangeTotal<this.state.returnTotal){
            alert('换货总金额需大于退货总金额')
        }else{
            if(this.state.useAmount<this.state.exchangeTotal-this.state.returnTotal){
                if(confirm(`您的货款不足,还需充值${this.state.exchangeTotal-this.state.useAmount-this.state.returnTotal}元`)){
                    this.context.router.push({pathname:'/recharge'});
                }
            }else{
                await this.setState({modalDelay:true})
                this.toApply(JSON.stringify(this.selectStock),JSON.stringify(this.returnGoods))
            }
        }
    }

    //进货列表
    async toApply(change,back){
        if(this.state.index==0) {
            await VirtualReturnApply(change,back)
                .then(res=> {
                    alert('申请退换货成功')
                    this.setState({modalDelay:false})
                    this.context.router.push({pathname:'/PersonalCenter'});
                })
                .catch(err=> {
                    alert(err.message);
                    this.setState({modalDelay:false})
                    console.warn('err', err)
                })
        }else{
            if(!this.state.deliveryNo){
                    alert('请输入快递单号')
                return
                }
            await WarehouseReturnApply(change,back,this.state.deliveryNo)
                .then(res=> {
                    alert('申请退换货成功')
                    this.setState({modalDelay:false})
                    this.context.router.push({pathname:'/PersonalCenter'});
                })
                .catch(err=> {
                    alert(err.message);
                    this.setState({modalDelay:false})
                    console.warn('err', err)
                })
        }
    }

    render(){
        const {goodsList,returnTotal,exchangeTotal}=this.state;
        return(
            <div className="f14">
                <Top
                    title ={'换货列表'}
                />
                <Split />

                <div id="content" className="bkg_color" style={{top:50,bottom:50}}>
                    <div id="scroller" style={{minHeight:window.innerHeight-99}}>
                        <div id="pullDown" className="ub ub-pc c-gra">
                            <div className="pullDownIcon"></div>
                            <div className="pullDownLabel">下拉刷新</div>
                        </div>
                        <ul id="add">
                            {
                                goodsList.length==0?
                                    <Empty />
                                    :
                                goodsList&&goodsList.map((el,ind)=>{
                                    return(
                                        <div>
                                            <div className="padd10 flex flex-pack-justify flex-pack-justify" style={{borderBottom:'1px solid #e5e5e5',marginTop:10}}>
                                                <div><img src={el.IMAGE} style={{width:80,height:80,marginLeft:10}} alt=""/></div>
                                                <div className="flex-v flex-align-center" style={{marginLeft:20}}>
                                                    <div>{el.NAME}</div>
                                                    <div>
                                                        <span className="colorff f12">￥</span><span className="colorff f16">{el.price}</span>
                                                    </div>
                                                    {/* <div>虚仓库存：<span className="di height100 borderno tc" style={{width:60}}>{el.STOCK}</span></div>
                                                    <div>实仓库存：<span className="di height100 borderno tc" style={{width:60}}>{el.WAREHOUSE_STOCK}</span></div>*/}
                                                    <div>换货数量：
                                                        <input type="number" defaultValue="0" className="di height100 borderno tc"
                                                               style={{width:60,borderBottom:'1px solid #e5e5e5'}}
                                                               ref = {"num" + ind}
                                                               onBlur = {()=>this.submit(el.ID,ind)}
                                                        />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    )}
                                )
                            }
                            {
                                this.state.index!=0?
                                    <div style={{textAlign:'left',height:40,lineHeight:'40px',paddingLeft:20}}>
                                        请输入快递单号：
                                        <input
                                            type="number"
                                            className="di borderno tc"
                                            ref = 'deliveryNo'
                                            onChange = {() =>this.setState({deliveryNo:this.refs.deliveryNo.value})}
                                            style={{width:150,borderBottom:'1px solid #e5e5e5'}}
                                        />
                                    </div>
                                    :null

                            }

                        </ul>
                        <div id="pullUp" className="ub ub-pc c-gra">
                            <div className="pullUpIcon"></div>
                            <div className="pullUpLabel">上拉显示更多...</div>
                        </div>
                    </div>
                </div>

                <div className="pf bottomCount flex flex-align-center flex-pack-justify plr width100 color6 f18"
                     style={{bottom:0}}>
                    <div className="flex-v f14">
                        <div>退货总金额:{returnTotal}元</div>
                        <div>换货总金额:{exchangeTotal}元</div>
                    </div>
                    <button
                            onClick={()=>this.toReturn()}
                            style={{background:'#fa6b5b'}}
                            className="settleAccount border_4 colorfff borderno bgDefault"
                        >
                            提 交
                        </button>
                </div>
                {
                    this.state.modalDelay?
                        <DelayModal />
                        :null

                }
            </div>
        )
    }

}

